<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>用户登录－云校账号</title>
    <link rel="shortcut icon" href="http://www.yunxiao.com/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/server.css">

    <!--[if lt IE 9]>
        <script src="/bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>

    <header class="usercenter-header">
        <img src="image/header_bg.png" class="header-image" />
        <div class="logos">

            <img src="image/default.png" alt="云校logo" class="yx-logo" style="margin-left: -96px;" />
        </div>
    </header>

    <div class="yx-content">
        <article class="usercenter-container">
            <header>云校帐号登录</header>
            <!--登录云校帐号表单-->
            <form class="login-yunxiao">
                <!--验证帐号 当输入的是电话时再form-list后添加account-phone -->
                <!--当输入的是用户名时再form-list后添加account-username-->
                <!--当输入的是邮箱时再form-list后添加account-email-->
                <!--以上全部去除， 统一为account-name -->
                <section class="form-list account-name">
                    <input id="loginName" type="text" placeholder="请输入用户名/邮箱/手机号" />
                    <!--左侧图标-->
                    <span class="username-icon"></span>
                    <aside class="validate hide">
                        <span></span>
                    </aside>
                </section>
                <section class="form-list account-password">
                    <input id="password" type="password" maxlength="20" placeholder="请输入密码" />
                    <span class="password-icon"></span>
                    <aside class="validate hide">
                        <span></span>
                    </aside>
                </section>
                <!--多次输入错误，显示验证码-->
                <section class="form-list captchas-validate" style="display: none;">
                    <!--验证码区域-->
                    <div class="captchas-img">
                        <img id="captchaImage" src="image/code.jpg" alt="验证码" />
                        <a id="captchaRefresh">换一张</a>
                    </div>
                    <input id="captchaValue" type="text" placeholder="输入验证码" />
                    <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>
                <section class="form-list auto-login">
                    <!--检测结果状态 验证错误，在warning后添加 error  -->
                    <div id="errMsg" class="warning">
                        <span></span>
                    </div>
                    <div class="checkbox-pic">
                        <input type="checkbox" name="loginNext" id="login-next" />
                        <!--如果input有checked被选中状态，则为 span 添加类名checkbox-checked -->
                        <label for="login-next"><span></span>下次自动登录</label>
                    </div>
                </section>
                <section class="form-list">
                    <a id="btn-login" class="account-btn account-submit">登录</a>
                </section>

                <!--忘记密码与专用通道-->
                <section class="form-list password-channel">
                    <a id="btn-password" class="forget-password">忘记密码?</a>
                    <a id="btn-partner" class="private-channel">合作学校专用通道
                <span></span>
                    </a>
                </section>
                <section class="form-list">
                    <a id="btn-register" class="account-btn account-other">还没有帐号？免费注册 <span class="login-go"></span>
                    </a>
                </section>
            </form>
        </article>



        <footer class="usercenter-footer">
            <ul>
                <li><a href="http://www.yunxiao.com">云校官网</a></li>
                <li><a href="http://paike.yunxiao.com">排课</a></li>
                <li><a href="http://bbs.yunxiao.com">论坛</a></li>
                <li><a>北京修齐治平科技有限公司 ©2015</a></li>
            </ul>
        </footer>
    </div>
</body>
</html>
